<template>
	<view class="shop-page">
		<!-- 商城搜索框 -->
		<view class="shop-search" @click="goToPage('/pages/search/search')">
			<!-- 搜索框 -->
			<u-search searchIconColor="#FF7803" searchIconSize="48" placeholder="热门轮播" height="80rpx"
				:showAction="false">
			</u-search>
		</view>

		<!-- 商城nav -->
		<view class="shop-nav" :style="'top:' + stickyTop + 'px'">
			<u-tabs :list="tarbbarList" lineWidth="40rpx" lineHeight="8rpx" lineColor="#FF7803" :activeStyle="{
							color: '#333',
							fontWeight: 'bold'
						}" @click="clickTab">
			</u-tabs>
		</view>

		<!-- 商品列表 -->
		<view class="shop-list">
			<view class="shop-list-left">
				<view class="list-item" v-for="item in 7" :key="item" @click="goToPage('/pages/shop/GoodsDetail')">
					<!-- 图片 -->
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="image" />
					<!-- 具体内容 -->
					<view class="content">
						<!-- 标题 -->
						<view class="title">
							<!-- 预售 -->
							<text class="pre">预售</text>
							<text>商品名称</text>
						</view>
						<!-- 价格 -->
						<view class="money">￥100</view>
					</view>
				</view>
			</view>
			<view class="shop-list-right">
				<view class="list-item" v-for="item in 7" :key="item" @click="goToPage('/pages/shop/GoodsDetail')">
					<!-- 图片 -->
					<image src="/static/images/boom/boom-detail/award-doll.png" mode="" class="image" />
					<!-- 具体内容 -->
					<view class="content">
						<!-- 标题 -->
						<view class="title">
							<!-- 预售 -->
							<text class="pre">预售</text>
							<text>商品名称</text>
						</view>
						<!-- 价格 -->
						<view class="money">￥100</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶
				stickyTop: 0,
				// 导航条列表
				tarbbarList: [{
					name: '全部'
				}, {
					name: '潮玩盲盒'
				}, {
					name: '动漫手办'
				}, {
					name: '3C数码'
				}, {
					name: '美妆'
				}]
			}
		},
		methods: {
			clickTab(item) {
				console.log('item', item.name);
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		mounted() {
			this.stickyTop = uni.getSystemInfoSync().windowTop
		}
	}
</script>

<style lang="scss" scoped>
	// 商城页面
	.shop-page {
		width: 100vw;

		// 商城搜索框
		.shop-search {
			padding: 20rpx 30rpx;
			background-color: #fff;
		}

		// 商城nav
		.shop-nav {
			position: sticky;
			// top: 88rpx;

			// 在微信小程序 top值为0
			// #ifdef MP-WEIXIN 
			top: 0;
			// #endif

			width: 100vw;
			background: #fff;
			// padding: 10rpx 0;
			padding-bottom: 10rpx;
			z-index: 99;
		}
	}

	.shop-list {
		display: flex;
		flex-wrap: wrap;
		padding: 18rpx 30rpx;

		.shop-list-left {
			margin-right: 18rpx;
		}

		.list-item {
			width: 336rpx;
			background: #fff;
			margin-bottom: 18rpx;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #333;
			overflow: hidden;

			.image {
				width: 336rpx;
				height: 336rpx;
			}

			.content {
				padding: 16rpx 10rpx;

				.title {
					// 超出文本显示隐藏
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

					.pre {
						display: inline-block;
						width: 44rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						background: rgba(234, 110, 122, 0.2);
						// font-size: 20rpx;
						font-size: 18rpx;
						text-align: center;
						line-height: 32rpx;
						color: #F51F43;
					}
				}

				.money {
					color: #F51F43;
					font-weight: 500;
					margin-top: 18rpx;
				}
			}
		}
	}
</style>
